"use client";

import { ChevronRight } from "lucide-react"

interface SectionHeaderProps {
  title: string
  icon?: string
  showMore?: boolean
  onMoreClick?: () => void
}

export function SectionHeader({ title, icon, showMore = true, onMoreClick }: SectionHeaderProps) {
  return (
    <div className="flex items-center justify-between mb-4">
      <div className="flex items-center gap-2">
        {icon && <span className="text-lg">{icon}</span>}
        <h2 className="text-lg font-semibold text-foreground">{title}</h2>
      </div>
      {showMore && (
        <button 
          onClick={onMoreClick}
          style={{
            background: 'none',
            border: 'none',
            cursor: 'pointer',
          }}
          className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary transition-colors "
        >
          更多
          <ChevronRight className="h-4 w-4" />
        </button>
      )}
    </div>
  )
}
